<template>
  <div class="contact">
    <!-- 页面头部 -->
    <section class="contact__header section">
      <div class="container">
        <h1 class="section-title">联系我</h1>
        <p class="contact__intro">
          如果您有任何问题或合作意向，欢迎通过以下方式与我联系
        </p>
      </div>
    </section>
    
    <!-- 联系方式卡片 -->
    <section class="contact__info section">
      <div class="container">
        <div class="contact__info-grid">
          <div class="info-card">
            <ElIcon :size="48" class="info-card__icon">
              <Message />
            </ElIcon>
            <h3 class="info-card__title">邮箱</h3>
            <p class="info-card__text">{{ personalInfo.email }}</p>
            <ElButton
              text
              type="primary"
              @click="copyToClipboard(personalInfo.email)"
            >
              复制邮箱
            </ElButton>
          </div>
          
          <div class="info-card">
            <ElIcon :size="48" class="info-card__icon">
              <Location />
            </ElIcon>
            <h3 class="info-card__title">位置</h3>
            <p class="info-card__text">{{ personalInfo.location }}</p>
          </div>
          
          <div class="info-card">
            <ElIcon :size="48" class="info-card__icon">
              <Phone />
            </ElIcon>
            <h3 class="info-card__title">电话</h3>
            <p class="info-card__text">{{ personalInfo.phone }}</p>
            <ElButton
              text
              type="primary"
              @click="copyToClipboard(personalInfo.phone)"
            >
              复制电话
            </ElButton>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 联系表单 -->
    <section class="contact__form section">
      <div class="container">
        <div class="contact__form-wrapper">
          <div class="contact__form-header">
            <h2 class="section-title">发送消息</h2>
            <p class="contact__form-desc">
              填写下面的表单，我会尽快回复您
            </p>
          </div>
          <ContactForm />
        </div>
      </div>
    </section>
    
    <!-- 社交媒体 -->
    <section class="contact__social section">
      <div class="container">
        <h2 class="section-title">关注我</h2>
        <p class="contact__social-desc">
          也可以通过以下社交媒体与我联系
        </p>
        <div class="contact__social-links">
          <a
            v-for="link in socialLinks"
            :key="link.name"
            :href="link.url"
            :title="link.name"
            class="social-link"
            target="_blank"
            rel="noopener noreferrer"
          >
            <ElIcon :size="32">
              <component :is="getIconName(link.name)" />
            </ElIcon>
            <span>{{ link.name }}</span>
          </a>
        </div>
      </div>
    </section>
    
    <!-- CTA 区域 -->
    <section class="contact__cta section">
      <div class="container">
        <div class="cta-card">
          <h2 class="cta-card__title">准备好开始了吗？</h2>
          <p class="cta-card__text">
            无论是项目合作还是技术交流，我都很乐意与您沟通
          </p>
          <div class="cta-card__actions">
            <ElButton type="primary" size="large" @click="scrollToForm">
              <ElIcon><Message /></ElIcon>
              立即联系
            </ElButton>
            <ElButton size="large" @click="$router.push('/projects')">
              <ElIcon><FolderOpened /></ElIcon>
              查看项目
            </ElButton>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { Message, Location, Phone, FolderOpened } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
import ContactForm from '@/components/sections/ContactForm.vue'

const userStore = useUserStore()
const { info: personalInfo, social: socialLinks } = userStore

// 复制到剪贴板
const copyToClipboard = async (text) => {
  try {
    await navigator.clipboard.writeText(text)
    ElMessage.success('已复制到剪贴板')
  } catch (error) {
    ElMessage.error('复制失败，请手动复制')
  }
}

// 滚动到表单
const scrollToForm = () => {
  const formSection = document.querySelector('.contact__form')
  if (formSection) {
    formSection.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }
}

// 根据社交平台名称返回对应的图标组件名
function getIconName(name) {
  const iconMap = {
    'GitHub': 'Position',
    '微信': 'ChatDotRound',
    '邮箱': 'Message'
  }
  return iconMap[name] || 'Link'
}
</script>

<style lang="scss" scoped>
.contact {
  &__header {
    text-align: center;
  }
  
  &__intro {
    max-width: 800px;
    margin: 0 auto;
    font-size: $font-size-lg;
    color: var(--text-secondary);
    line-height: 1.8;
  }
  
  &__info {
    background: var(--bg-secondary);
  }
  
  &__info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: $spacing-xl;
    
    @include respond-to('md') {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  &__form-wrapper {
    max-width: 800px;
    margin: 0 auto;
  }
  
  &__form-header {
    text-align: center;
    margin-bottom: $spacing-2xl;
  }
  
  &__form-desc {
    font-size: $font-size-base;
    color: var(--text-secondary);
    margin-top: $spacing-md;
  }
  
  &__social {
    background: var(--bg-secondary);
    text-align: center;
  }
  
  &__social-desc {
    font-size: $font-size-base;
    color: var(--text-secondary);
    margin-bottom: $spacing-2xl;
  }
  
  &__social-links {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-lg;
    justify-content: center;
  }
  
  &__cta {
    background: linear-gradient(135deg, $primary-color, $secondary-color);
  }
}

.info-card {
  text-align: center;
  padding: $spacing-2xl;
  background: var(--bg-primary);
  border-radius: $radius-lg;
  @include transition(transform, box-shadow);
  
  &:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
  }
  
  &__icon {
    color: $primary-color;
    margin-bottom: $spacing-md;
  }
  
  &__title {
    font-size: $font-size-xl;
    margin-bottom: $spacing-sm;
  }
  
  &__text {
    color: var(--text-secondary);
    margin-bottom: $spacing-md;
    word-break: break-all;
  }
}

.social-link {
  @include flex-center;
  flex-direction: column;
  gap: $spacing-sm;
  padding: $spacing-lg;
  background: var(--bg-primary);
  border-radius: $radius-lg;
  min-width: 120px;
  color: var(--text-primary);
  @include transition(all);
  
  &:hover {
    background: $primary-color;
    color: white;
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    
    .el-icon {
      color: white;
    }
  }
  
  .el-icon {
    color: $primary-color;
    @include transition(color);
  }
  
  span {
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;
  }
}

.cta-card {
  text-align: center;
  padding: $spacing-3xl $spacing-xl;
  color: white;
  
  &__title {
    font-size: $font-size-4xl;
    margin-bottom: $spacing-md;
    color: white;
  }
  
  &__text {
    font-size: $font-size-lg;
    margin-bottom: $spacing-2xl;
    opacity: 0.9;
  }
  
  &__actions {
    display: flex;
    gap: $spacing-md;
    justify-content: center;
    flex-wrap: wrap;
  }
}
</style>

